<template>
  <div>
    <h1>Todo List</h1>
    <el-input v-model="newTodo" placeholder="添加新的待办事项" @keyup.enter="addTodo" />
    <el-button type="primary" @click="addTodo">添加</el-button>
    <ul>
      <todo-item
        v-for="(todo, index) in todos"
        :key="index"
        :todo="todo"
        :index="index"
        @remove="removeTodo"
        @toggle="toggleTodo"
      />
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: this.getTodos()
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, completed: false })
        this.saveTodos()
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
      this.saveTodos()
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed
      this.saveTodos()
    },
    getTodos() {
      return JSON.parse(localStorage.getItem('todos')) || []
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    }
  }
}
</script>

<style>
body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}
</style>
